<template>
  <div v-show="visible" class="ver-modal">
    <div class="wrapper">
      <div class="block">
        <vueCropper
          ref="cropper"
          :img="img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="true"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :full="option.full"
          :fixedBox="option.fixedBox"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :high="option.high"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          @realTime="realTime"
          :enlarge="option.enlarge"
          :mode="option.mode"
          :limitMinSize="option.limitMinSize"
        ></vueCropper>
      </div>
      <div class="foot-tool">
        <div @click="onCancel">取消</div>
        <img class="revolve" src="./revolve.png" alt="" @click="rotateLeft" />
        <div class="confirm-btn" @click="onFinish">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  components: { VueCropper },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    img: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      option: {
        outputSize: 1,
        outputType: 'png',
        info: true,
        canScale: true,
        autoCrop: true, // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 300,
        autoCropHeight: 300,
        fixed: true,
        fixedNumber: [1, 1],
        full: false,
        fixedBox: true,
        canMove: true,
        canMoveBox: false,
        original: false,
        centerBox: false,
        high: false,
        infoTrue: true,
        maxImgSize: 2000,
        enlarge: 1,
        mode: 'cover',
      },
    }
  },
  methods: {
    realTime(data) {
      // 实时预览
      // console.log('实时预览', data)
    },

    onCancel() {
      // 取消当前操作
      this.$emit('cancel')
    },
    // 点击裁剪，这一步是可以拿到处理后的地址
    onFinish() {
      if (this.img) {
        this.$refs.cropper.getCropData(data => {
          this.$emit('complete', data)
        })
      } else {
        this.$emit('complete', {})
      }
    },
    // 想做反转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
  },
}
</script>

<style lang="less" scoped>
.ver-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 99;
  ::v-deep .cropper-box {
    overflow: visible;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
}

.block {
  width: 300px;
  height: 300px;
  background-color: #fff;
  margin-bottom: 20px;
}

.foot-tool {
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #fff;
  padding: 0 0.2rem;
  .revolve {
    display: block;
    width: 0.3rem;
    height: 0.3rem;
  }
  .confirm-btn {
    width: 0.68rem;
    height: 0.34rem;
    line-height: 0.34rem;
    background: #2c9fdf;
    border-radius: 0.16rem;
    text-align: center;
  }
}
</style>